<template>
<div>
	<h1>Codemirror next markdown editor with vue demo</h1>
	<div class="editor-wrap">
		<MkEditorVue @change="getMdSource"/>
		<div class="preview-section">
			<div v-html="htmlSource"></div>
		</div>
	</div>
</div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
import MkEditorVue from './components/MkEditor1.vue';
import marked from 'marked';
import hljs from 'highlight.js';
export default defineComponent({
	name: 'App',
	components: {
		MkEditorVue,
	},
	setup(){
		marked.setOptions({
			renderer: new marked.Renderer(),
			highlight: function(code, language) {
				//const hljs = require('highlight.js');
				const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
				return hljs.highlight(validLanguage, code).value;
			},
			pedantic: false,
			gfm: true,
			breaks: false,
			sanitize: false,
			smartLists: true,
			smartypants: false,
			xhtml: false
		});
		const htmlSource = ref('')
		function getMdSource(mdSource: string){
			console.log(mdSource);
			htmlSource.value = marked(mdSource);
		}	
		return {
			getMdSource,
			htmlSource
		}
	}
});
</script>
<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
}
* {
	padding: 0;
	margin: 0;
}
.editor-wrap {
	display: flex;
	padding: 0 12px;
}
.preview-section {
	flex: 1;
	border: 1px solid silver;
	margin-left: 2px;
	padding: 12px;
}

.preview-section img {
	max-width: 100%;
}
/*  CodeMirror */
.cm-editor {
	min-height: 300px;
	height: auto;
	outline: none;
	border: 1px solid silver;
	width: 100%;
	border-radius: 2px;
}
.cm-lineNumbers {
	min-height: 300px;
}
.ͼ1 .cm-content {
	min-height: 300px !important;
	padding: 8px;
	min-width: 300px!important;
}

.ͼ1 .cm-line {
	display: block;
	padding: 1px;
	/* word-wrap: break-word;
	white-space: pre-wrap;
	word-break: normal; */
}
.cm-editor .cm-content {
	font-family: 'Consolas';
}


/**
语法高亮
*/

pre{
	display: block;
	background-color:#f3f3f3;
	padding: .5rem !important;
	overflow-y: auto;
	font-weight: 300;
	font-family: Menlo, monospace;
	border-radius: .3rem;
}
/* pre{
  background-color: #283646 !important;
} */
/* pre >code{
	border:0px !important;
	background-color: #283646 !important;
	color:#FFF;
 
} */
pre>code {
	display: inline-block ;
	background-color:#f3f3f3;
	/* border:1px solid #fdb9cc; */
	font-size: 13px;
	padding-left: 5px;
	padding-right: 5px;
	color:#4f4f4f;
	margin: 0px 3px;
	line-height: 180%;
	font-family: Monaco, 'Courier New', Courier, monospace;
 
}
 



</style>
